<template>
  <div class="container">
    <VerticalLayout :isSearchCollapsed="isSearchCollapsed">
      <template #filters>
        <!-- 筛选表单 -->
        <FilterForm role="sales" @change="filterChange" />
      </template>
      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="flex-start">
          <el-switch
            v-model="isSearchCollapsed"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inline-prompt
            active-text="展开"
            inactive-text="收起"
          />

          <DynamicQueryForm
            :show-match-range="true"
            :extra-fields="extraField()"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="listRepeatPurchaseOrder"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left>
            <!-- <el-button type="primary" :icon="View" @click="">查看今日复购</el-button> -->
            <!-- <el-button type="primary" :icon="Plus" @click="onAdd('add')">创建复购单</el-button> -->
            <!-- <el-button type="primary" :icon="Plus" @click="onMultiPackage">创建多包裹复购单</el-button> -->
            <!-- <el-button type="primary" :icon="Van" @click="onReturnOrder()">新增退货单</el-button> -->
            <!-- <el-button type="primary" :icon="Van" @click="onReplenishOrder()">新增补货单</el-button> -->
            <!-- <el-button type="primary" :icon="Plus" @click="onAdd('superaddition')">追加（平台转定金/复购）</el-button> -->
          </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <template #table-top v-if="selections.length > 0"> </template>

          <template #orderSlot="{ row }">
            <RowSlots :row="row" slotName="repeatOrderSlot" />
          </template>
          <!-- 收货人信息 -->
          <template #logisticsSlot="{ row }">
            <RowSlots :row="row" slotName="repeatLogisticsSlot" @payHistory="payHistory" />
          </template>

          <!-- 业务员信息 -->
          <template #salesmanSlot="{ row }">
            <RowSlots :row="row" slotName="salesmanSlot" />
          </template>

          <!-- 类别 -->
          <template #categorySlot="{ row }">
            <RowSlots :row="row" slotName="categorySlot" />
          </template>

          <!-- 物流信息 -->
          <template #logisticsStatusSlot="{ row }">
            <RowSlots :row="row" slotName="logisticsStatusSlot" />
          </template>

          <!-- 商品数量 -->
          <template #dosageSlot="{ row }">
            <RowSlots :row="row" :goodsTypes="goodsTypes" slotName="repeatDosageSlot" />
          </template>

          <!-- 下单/签收时间 -->
          <template #orderTimerSlot="{ row }">
            <RowSlots :row="row" slotName="orderTimerSlot" />
          </template>

          <!-- 备注 -->
          <template #remarkSlot="{ row }">
            <RowSlots
              :row="row"
              slotName="remarkSlot"
              @showCustomerFollowUp="showCustomerFollowUp"
            />
          </template>

          <!-- 操作 -->
          <template #operationSlot="{ row }">
            <el-space v-if="!row.isChildren" size="small" wrap alignment="normal">
              <!-- <el-button type="primary" :icon="Edit" text size="small" @click="onEdit(row, 'edit')"
                >编辑</el-button
              >
              <el-button :icon="Van" text type="danger" size="small" @click="onReturnOrder(row)"
                >退货</el-button
              >
              <el-button type="primary" size="small" text :icon="Van" @click="onReplenishOrder(row)"
                >补单</el-button
              > -->
              <el-button
                v-if="+row.topStatus === 2"
                type="primary"
                :icon="Edit"
                text
                size="small"
                @click="onOperationClick(row, 'top')"
                >置顶</el-button
              >
              <el-button
                v-else
                type="primary"
                :icon="Edit"
                text
                size="small"
                @click="onOperationClick(row, 'cancelTop')"
                >取消置顶</el-button
              >
            </el-space>
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>
    <!-- 筛选弹窗 -->
    <FilterTable ref="filterTableRef" />
    <!-- 跟进详情 -->
    <CustomerFollowUp ref="customerFollowUpRef" @ok="customTableRef?.refresh" />

    <!-- 批量下发 -->
    <BatchAllocations
      ref="batchAllocationRef"
      :logisticsCompany="logisticsCompany"
      :users="users"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      :logisticsTypeOptions="logisticsTypeOptions"
      @ok="customTableRef?.refresh"
    />
    <!-- 用户下单记录 -->
    <CustomerOrderHistory ref="customerOrderHistoryRef" />
    <!-- 创建/追加复购单 -->
    <AddPorder
      :goodsList="goodsList"
      :logisticsCompany="logisticsCompany"
      :payType="payType"
      :orderFrom="orderFrom"
      :goodsTypes="goodsTypes"
      :orderTypeOptions="orderTypeOptions"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      :logisticsTypeOptions="logisticsTypeOptions"
      ref="addPorderRef"
      @ok="customTableRef?.refresh"
    />
    <!-- 创建多包裹订单 -->
    <CreateMultiPackageOrder
      :goodsList="goodsList"
      :goodsTypes="goodsTypes"
      :logisticsCompany="logisticsCompany"
      :logisticsTypeOptions="logisticsTypeOptions"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      :orderFrom="orderFrom"
      :payType="payType"
      @ok="customTableRef?.refresh"
      ref="createMultiPackageOrderRef"
    />
    <!-- 新增退货单 -->
    <ReturnOrderDialog
      :orderTypeOptions="orderTypeOptions"
      :returnTypeOptions="returnTypeOptions"
      ref="returnOrderDialogRef"
    />
    <!-- 新增补货单 -->
    <ReplenishOrderDialog
      :orderTypeOptions="orderTypeOptions"
      :goodsList="goodsList"
      :replenishTypeOptions="replenishTypeOptions"
      :goodsTypes="goodsTypes"
      :sysSelfFulfillmentOgistics="sysSelfFulfillmentOgistics"
      :logisticsCompany="logisticsCompany"
      :payType="payType"
      :logisticsTypeOptions="logisticsTypeOptions"
      @ok="customTableRef?.refresh"
      ref="replenishOrderDialogRef"
    />
    <!-- 置顶弹窗 -->
    <TopDialog ref="topDialogRef" @ok="customTableRef?.refresh" />
    <!-- 修改代付金额 -->
    <ModifyPaymentDialog ref="modifyPaymentDialogRef" />
    <!-- 批量打印 -->
    <BatchPrintDialog ref="batchPrintDialogRef" />
    <!-- 单张打印 -->
    <SinglePrintDialog ref="singlePrintDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { Edit, Van } from '@element-plus/icons-vue';
import { columns } from './columns';
import { onMounted, ref } from 'vue';
import { listRepeatPurchaseOrder } from '../../../api/platformOrders/orders/repeatPurchaseOrder';
import { useCustomStore } from '../../../store/modules/custom';
import { columnsValues, extraField } from './searchOptions';
import { useDict } from '../../../utils/dict';
import { useYw } from '../../../hooks/useYw';
import { useGoods } from '../../../hooks/useGoods';
import { useFilterSearch } from '../../../hooks/useFilterSearch';

// 用户类别
// 是否添加微信
const customStore = useCustomStore();
const { ywList: users } = useYw();
// 基础商品列表
const { goodsList } = useGoods();

// 快捷搜索收起/展开
const isSearchCollapsed = ref(false);
// table
const customTableRef = ref();
// 筛选
const filterTableRef = ref();
// 跟进详情
const customerFollowUpRef = ref();
// 批量下发
const batchAllocationRef = ref();
// 用户下单记录
const customerOrderHistoryRef = ref();
// 创建复购单
const addPorderRef = ref();
// 创建多包裹订单
const createMultiPackageOrderRef = ref();
// 创建退货单
const returnOrderDialogRef = ref();
// 创建补货单
const replenishOrderDialogRef = ref();
// 置顶弹窗
const topDialogRef = ref();
// 修改代付弹窗
const modifyPaymentDialogRef = ref();
// 批量打印
const batchPrintDialogRef = ref();
// 单张打印
const singlePrintDialogRef = ref();
// 统一管理search
const { filterChange, onSubmit } = useFilterSearch(customTableRef);

// 字典集合
const {
  sys_logistics_company: logisticsCompany, // 物流公司
  sys_pay_type: payType, // 支付类型
  sys_goods_type: goodsTypes, // 商品类型
  sys_order_type: orderTypeOptions, // 订单类型
  sys_replenish_order: replenishTypeOptions, // 订单类型
  sys_sales_return: returnTypeOptions, // 退货类型
  sys_order_from: orderFrom, // 订单来源
  sys_self_fulfillment_ogistics: sysSelfFulfillmentOgistics, // 第三方快递
  sys_logistics_type: logisticsTypeOptions // 物流类型
} = useDict(
  'sys_logistics_company',
  'sys_pay_type',
  'sys_goods_type',
  'sys_order_type',
  'sys_replenish_order',
  'sys_sales_return',
  'sys_order_from',
  'sys_self_fulfillment_ogistics',
  'sys_logistics_type'
);

// 选中项
const selections = ref<any>([]);
const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};

// 显示跟踪备注
const showCustomerFollowUp = (row: any, typeCode: number) => {
  customerFollowUpRef.value?.show(row, typeCode);
};

// 查看订单记录
const payHistory = (row: any) => {
  customerOrderHistoryRef.value?.show(row);
};

// 新增退货单
const onReturnOrder = (row?: any) => {
  returnOrderDialogRef.value?.show(row);
};

// 新增补发单/追加复购单
const onReplenishOrder = (row?: any) => {
  replenishOrderDialogRef.value?.show(row);
};

const onEdit = (data: any, type: any) => {
  addPorderRef.value.show(data, type);
};

// 操作点击
const onOperationClick = (row: any, type: any) => {
  switch (type) {
    case 'top':
      topDialogRef.value.show(row);
      break;
    case 'cancelTop':
      topDialogRef.value.cancelTop(row);
      break;
  }
};

onMounted(() => {
  // 初始化类别数据
  customStore.initCustom();
});
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
